<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script src="./vue.js"></script>
<body>
	
	<div id="app">

		<input type="button" name="" value="切换到第1个组件" @click="tabComponent(1)">

		<input type="button" name="" value="切换到第2个组件" @click="tabComponent(2)">

		<input type="button" name="" value="切换到第3个组件" @click="tabComponent(3)">

		<!-- 使用keep-alive保留切出去的组件状态的改变,不会再执行mouted -->
		<keep-alive>
			<component :is="current"></component>
		</keep-alive>
	</div>	

<script>

	var custom1=Vue.component('custom1',{
		template:`<div @click="changebg">我是第一个组件</>`,
		methods:{
			changebg(ev){
				ev.target.style.background='red';
			}
		}
	})

	var custom2=Vue.component('custom1',{
		template:`<div>我是第二个组件</>`
	})

	var custom3=Vue.component('custom1',{
		template:`<div>我是第三个组件</>`
	})


	var  vm=new Vue({
		el:'#app',
		data:{
			current:custom1,
		},
		methods:{
			tabComponent(index){
				if (index==1) {
					this.current=custom1;
				}else if(index==2){
					this.current=custom2;
				}else if(index==3){
					this.current=custom3;
				}
			}
		}
	})



</script>	
</body>
</html>